import React, { useEffect } from 'react';
import './index.css';

export default () => {

  // 线段的中心点 （100 + 390） / 2 中心点x： 245
  // 线段的中心点 （200 + 100） / 2 中心点x： 150

  const createTag = (tag: string, objAttr: any) => {
    const svgNS = 'http://www.w3.org/2000/svg';
    const oTag = document.createElementNS(svgNS, tag);

    for (const attr in objAttr) {
      oTag.setAttribute(attr, objAttr[attr]);
    }

    return oTag;

  }

  useEffect(() => {

    const oParent = document.getElementById('interestGraph');
    const svgNS = 'http://www.w3.org/2000/svg';
    const oSvg = createTag('svg', {width: '100%', height: '100%'});

    oParent?.appendChild(oSvg);

    const circleNum = 9;
    const centerR	 = 150;
    const centerX = oParent?.offsetWidth / 2;
    const centerY = oParent?.offsetHeight / 2;

    console.log(centerX, 'xxx');

    const otherData = [];
    for(let i=0; i<circleNum; i++){
      var y = Math.sin(i*40*Math.PI/180)*centerR + centerY;
      var x = Math.cos(i*40*Math.PI/180)*centerR + centerX;
      otherData.push({x : x , y : y , text : i});
    }

    console.log(otherData);


    for(var i=0; i < otherData.length; i++){
			addOtherTag(otherData[i])
		}

    function addOtherTag(otherAttr: any) {
      var oG2 = createTag('g', {'style':'cursor:pointer', 'class':'lineMove'});
      var oLine1 = createTag('line', {'x1':centerX, 'y1':centerY, 'x2':otherAttr.x, 'y2':otherAttr.y,'stroke':'#ccc'});
      var oLine2 = createTag('line', {'x1':centerX, 'y1':centerY, 'x2':otherAttr.x, 'y2':otherAttr.y,'stroke':'transparent', 'stroke-width':'10'});
      var oRect = createTag('rect', {'x':(otherAttr.x+centerX)/2 - 10, 'y':(otherAttr.y+centerY)/2 - 10, 'width':20,'height':20,'fill':'#999'});
      var oText2 = createTag('text',{'x':(otherAttr.x+centerX)/2, 'y':(otherAttr.y+centerY)/2+8,'font-size':'20','text-anchor':'middle', 'fill':'#fff'})
      oText2.innerHTML = '?';

      oG2.appendChild(oLine1);
      oG2.appendChild(oLine2);
      oG2.appendChild(oRect);
      oG2.appendChild(oText2);

      var oG = createTag('g', {'style':'cursor:pointer', 'class':'circleMove'});
      var oCircle = createTag('circle', {'cx':otherAttr.x, 'cy':otherAttr.y, 'r':30, 'fill':'white', 'stroke':'red', 'stroke-width':'1'});
      var oText = createTag('text', {'x':otherAttr.x, 'y':otherAttr.y+8,'font-size':'20','text-anchor':'middle'});
      oText.innerHTML = otherAttr.text;

      oG.appendChild(oCircle);
      oG.appendChild(oText);
      oSvg.appendChild(oG2);
      oSvg.appendChild(oG);
    }

  }, [])
  return <div id='interestGraph' className='interestGraph'>
            {/* <svg width={'100%'} height={'100%'}>
                <g style={{ cursor: 'pointer' }}>
                    <line x1={100} y1={100} x2={390} y2={200} stroke='#ccc'/>
                    <line x1={100} y1={100} x2={390} y2={200} stroke='transparent' strokeWidth={10}/>
                    <rect x={235} y={140} fill='#999' width={20} height={20} rx={5} />
                    <text x={245} y={158} fontSize={20} fill='white' textAnchor='middle'>?</text>
                </g>
                <g style={{ cursor: 'pointer' }}>
                    <circle cx={100} cy={100} r={40} fill='white' stroke='red' strokeWidth={3}/>
                    <text x={100} y={108} fontSize={20} textAnchor='middle'>小米</text>
                </g>
                <g style={{ cursor: 'pointer' }}>
                    <circle cx={390} cy={200} r={60} fill='white' stroke='red' strokeWidth={3}/>
                    <text x={390} y={208} fontSize={20} textAnchor='middle'>手机</text>
                </g>
              </svg> */}
         </div>
};


